<script src="static/admin/js/model/rbac/user/User.js" type="text/javascript" charset="utf-8"></script>
<div class="user-layout-north">
	<div class="north-menu">
		<ul class="left">
			<div class="button-group">
			  <button type="button" class="button active" onclick="operator_item(this);">列表</button>
			  <button type="button" class="button" clear="true" ference="master" exec_method="add" onclick="operator_item(this);">添加</button>
			  <button type="button" class="button" clear="true" exec_method="edit" reference="master" onclick="operator_item(this);" disabled="disabled">编辑</button>
			  <button type="button" class="button" onclick="operator_item(this);" disabled="disabled">删除</button>
			  <button type="button" class="button" onclick="operator_item(this);" disabled="disabled">冻结</button>
			  <button type="button" class="button" exec_method="thaw" onclick="operator_item(this);" not_move="true" disabled="disabled">解冻</button>
			</div>
		</ul>
		<ul style="float:right;" class="button-return">
			<li class="search-box-btn" style="margin-right:30px;margin-top:4px;cursor:pointer;"><a href="javascript:void(0);"  onclick="$user.showOrHiddenSearchBox(this);" title="搜索"><img src="img/icons/icon-search.png"/></a></li>
			<li class="b-r-loading" style="float:left;line-height:24px;padding:0 10px;">
				<a href="javascript:void(0);" title="操作中"><img style="display:none;" src="img/icons/b-r-loading.gif" /></a>
				<a href="javascript:void(0);" title="操作成功"><img style="display:none;margin-right:20px;" src="img/icons/load-success.png" /></a>
				<a href="javascript:void(0);" title="操作失败"><img style="display:none;margin-right:20px;" src="img/icons/load-error.png" /></a>
				<div style="display:none;float:right;"><b>3</b> <font>秒后进行跳转!</font></div>
			</li>
			<li style="float:right;display:block;margin-right:10px;">
				<button class="button button-little" onclick="operator_item($('.north-menu .button-group button:first'),'return');" style="display: none;">返回</button>
			</li>
		</ul>
		<ul>
			<div class="search-box" >
				<form onsubmit="return false">
					<table class="qikeke-grid">
						<tr>
							<td style="border:none;">用户名称:</td>
							<td style="border:none;">
								<input data-options="maxLength:5" name="username:like:String:{%,%}:notnull"  style="width: 134px;" type="text" class="easyui-textbox" />
							</td>
							<td style="border:none;">创建时间:</td>
							<td style="border:none;">
								<input style="width: 134px;" name="createTime:gt:Date" type="text" editable="false" class="easyui-datebox" />
							</td>
						</tr>
						<tr>
							<td style="border:none;">开始时间:</td>
							<td style="border:none;">
								<input style="width: 134px;" name="createTime:between:Date:begin" type="text" editable="false" class="easyui-datebox" />
							</td>
							<td style="border:none;">结束时间:</td>
							<td style="border:none;">
								<input style="width: 134px;" name="createTime:between:Date:end:notnull" type="text" editable="false" class="easyui-datebox" />
							</td>
						</tr>
						<tr>
							<td colspan="4" style="text-align: right;padding-right: 10px;border-bottom: 0;">
								<button type="button" onclick="$user.searchClear(this);" class="button button-small">清空</button>&nbsp;&nbsp;
								<button type="button" onclick="$user.search(this);" class="button bg-sub button-small">搜索</button>
							</td>
						</tr>
					</table>
				</form>
			</div>
		</ul>
	</div>
	<div class="base_up_close" onclick="base_up_close_click(this);"></div>
</div>
<div class="user-layout-center" style="overflow: hidden;">
	<div class="easyui-panel" id="auto_panel" style="position: absolute;height: 100%;width: 100%;" data-options="border:false">
		<table id="user-lists" class="auto_panel"></table>
	</div>
	
	<div>
		<div class="move_right">
			<form method="post" id="user_from" onsubmit="return false">
				<table class="qikeke-grid">
					<tr>
						<td>用户名称:</td>
						<td>
							<input data-options="maxLength:5"  style="width: 134px;" name="username" type="text" class="easyui-textbox" required="required" />
							<input type="hidden" name="id" />
						</td>
						<td>用户密码:</td>
						<td>
							<input style="width: 134px;" id="password" name="password" type="password" class="easyui-textbox" required="required" />
						</td>
					</tr>
					<tr>
						<td>所属部门:</td>
						<td id="departmentBox">
						</td>
						<td>角色列表:</td>
						<td id="roleBox">
						</td>
					</tr>
					<tr>
						<td colspan="4" style="text-align: right;padding-right: 10px;border-bottom: 0;">
							<button type="button" onclick="$user.save();" class="button bg-sub">提交</button>
						</td>
					</tr>
				</table>
			</form>
		</div>
		<div class="move_right">
			
		</div>
		<div class="move_right">
			<div class="dialog open">
			  <div class="dialog-head">
			    <strong>温馨提示</strong>
			  </div>
			  <div class="dialog-body">
			   	确定要删除这条数据么?
			  </div>
			  <div class="dialog-foot">
			    <button class="button button-small dialog-close" onclick="operator_item($('.north-menu .button-group button:first'),'return');">取消</button>
			    <button class="button button-small bg-green" onclick="$user.del();">确认</button>
			  </div>
			</div>
		</div>
		<div class="move_right">
			<div class="dialog open">
				  <div class="dialog-head">
				    <span class="dialog-close close rotate-hover"></span>
				    <strong>温馨提示</strong>
				  </div>
				  <div class="dialog-body">
				   	确定要冻结这条数据么?
				  </div>
				  <div class="dialog-foot">
				    <button class="button button-small dialog-close" onclick="operator_item($('.north-menu .button-group button:first'),'return');">取消</button>
				    <button class="button button-small bg-green" onclick="$user.congeal();">确认</button>
				  </div>
				</div>
			</div>
		</div>
		<div class="move_right">
			<div class="alert alert-green" style="position: absolute;top:50%;left:50%;margin-left:-150px;margin-top:-50px;width:300px;z-index: 999;"></div>
		</div>
	</div>
	
	<div class="base_up" mark="1">
		<div class="bu_list" options="beforeExec:'beforeTest',afterExec:'afterTest',retreat:'retreatTest'">
			<div class="bu_bg" style="background: #F2F2F2;"></div>
			<div class="bu_con">
				<div class="bc_content">
					<div id="test-layout">
						<div region="center">
						    <table id="test-user-lists" class="auto_panel"></table>
						</div>
						<div region="south" options="height:50">
						    <button class="button bg-sub" disabled="disabled" style="float: right;margin:4px 20px 0 0;">确定</button>
						</div>
					</div>
					<script type="text/javascript">
						function afterTest(){
							$("#test-layout").layoutInit();//参数写true为强制刷新
							$("#test-user-lists").datagrid({
									url : 'model/rbac/user/list.json',
									rownumbers : true,
									lines : true,
									fit:true,
									method:'get',
									fitColumns : true,
									singleSelect:true,
									columns : [ [ {
										field : 'id',
										title : 'ID编号',
										hidden : true,
										width : 100
									}, {
										field : 'name',
										title : '名称',
										width : 100
									}, {
										field : 'createTimeT',
										title : '创建时间',
										width : 100
									}, {
										field : 'status',
										hidden:true,
										title : '状态',
										formatter : function(val, row) {
											if (val == 'NORMAL') {
												return '正常';
											} else {
												return '<font style="color:red">冻结</font>';
											}
										},
										width : 100
									}, {
										field : 'description',
										title : '描述',
										width : 100
									} ] ]
								});
						}
					</script>
				</div>
			</div>
			<div class="bu_close"></div>
		</div>
		
		<div class="bu_list" options="beforeExec:'aa',afterExec:'bb',retreat:'a'">
			<div class="bu_bg" style="background: #E3E3E3;"></div>
			<div class="bu_con" style="color: white;">
				<div class="bc_content">
					5555
				</div>
			</div>
			<div class="bu_close"></div>
		</div>
		
		<div class="bu_list" options="beforeExec:'aa',afterExec:'bb'">
			<div class="bu_bg" style="background: #CECECE;"></div>
			<div class="bu_con" style="color: white;">
				<div class="bc_content">
					asdf
				</div>
			</div>
			<div class="bu_close"></div>
		</div>
	</div>
	
</div>

<script type="text/javascript">
	var $user = new User();

	$user.grid = $("#user-lists");
	$user.toolbars = [];//如何等于空将默认赋值[$('.button-group button:eq(1)'),$('.button-group button:eq(2)')]...四个按钮(除添加之外);
	$user.dialog = $("#user_dialog");
	$user.form = $("#user_from");
	$user.departmentBox = $("#departmentBox");
	$user.department = "#department";
	$user.roleBox = $("#roleBox");
	$user.role = "#role";
	
	
	$user.departmentTreeUrl = 'model/rbac/user/tree.json';
	$user.roleTreeUrl = '${ctx}/admin/rbac/role/tree.action';
	$user.check_by_user_url = 'model/rbac/user/check_by_user.json';
	$user.addUrl = '${ctx}/admin/rbac/user/add.action';
	$user.editUrl = '${ctx}/admin/rbac/user/edit.action';
	$user.congealUrl = '${ctx}/admin/rbac/user/congeal.action';
	$user.thawUrl = '${ctx}/admin/rbac/user/thaw.action';
	$user.delUrl = '${ctx}/admin/rbac/user/delete.action';
	$user.mapsUrl = 'model/rbac/user/list.json';
	
	$user.init($user.mapsUrl);//传进去的url用于显示网格数据
	
	$(function(){
		$('.base_up .bu_list').each(function(){
			var _index = $(this).index();
			var $this = $(this);
			$this.css({
				left:_index*8,
				top:_index*2,
				width:$this.width()-(4*_index),
				height:$this.height()-(2*_index*2)
			})
		});
	});
	
	var markSeqCount = 0;
	var divMark = null;
	function test (mark) {
		divMark = mark;
		if(!$('.base_up_close').is(':visible')){
			$('.base_up_close').show();
		}
		var _ob = $('.base_up[mark='+divMark+'] .bu_list').eq(markSeqCount);
		var _options = ('{'+_ob.attr('options')+'}').toJSON();
		if(_options.beforeExec){
			try{
				window[_options.beforeExec]();
			}catch(e){
				console.info(_options['beforeExec']+'方法不存在,或者非方法');
			}
		}
		_ob.css({
			left:$(this).width(),
		}).show().animate({
			left:markSeqCount*8
		},function(){
			if(_options.afterExec){
				try{
					window[_options.afterExec]();
				}catch(e){
					console.info(_options['afterExec']+'方法不存在,或者非方法');
				}
			}
		});
		if(markSeqCount<$('.base_up[mark='+divMark+'] .bu_list').length){
			markSeqCount++;
		}
	}
	
	function base_up_close_click () {
		var $self = $(arguments[0]);
		$('.base_up[mark='+divMark+'] .bu_list:visible:last').animate({
			left:$('.base_up').width()
		},function(){
			$(this).hide();
			if($(this).index()==0){
				$('.base_up_close').hide();
			}
			var _options = ('{'+$(this).attr('options')+'}').toJSON();
			if(_options.retreat){
				if(typeof _options.retreat == 'function'){
					window[_options.retreat]();
				}else{
					console.info(_options.retreat+'方法不存在,或者非方法');
				}
			}
		});
		if(markSeqCount>0){
			markSeqCount--;
		}
	}
	
	function move_list_by_direction(direction){
		if(direction=='left'){//左边方向
			$("#auto_panel").each(function(){
				$(this).dequeue();
			}).animate({
				'left':0
			},{
				duration: 1000,
				easing:'easeInOutCirc'
			});
		}else if(direction=='right'){//右边方向
			$("#auto_panel").each(function(){
				$(this).dequeue();
			}).animate({
				'left':-$("#auto_panel").width()-200
			},1000);
		}
	}
	
	function move_oper_by_direction(direction,index){
		if(index==0){
			move_list_by_direction(direction);
			index = $('.north-menu .button-group button.active').index();
		}
		
		index = index-1;
		
		if(direction=='left'){//左边方向
			$(".move_right").eq(index).css({
				'left':0,
				'opacity':1
			}).each(function(){
				$(this).dequeue();
			}).show().animate({
				'left':$("#auto_panel").width(),
				'opacity':0
			},1000);
		}else if(direction='right'){//右边方向
			$(".move_right").eq(index).css({
				'left':$("#auto_panel").width(),
				'opacity':0
			}).each(function(){
				$(this).dequeue();
			}).show().animate({
				'left':0,
				'opacity':1
			},1000);
		}
	}
	
	function operator_item(self){
		var $self = $(self);
		
		if($self.hasClass('active')){//当前活动选项,不给于点击
			return;
		}
		
		if($self.attr('not_move')&&$self.attr('not_move')!=''){//判断是否是无移动操作
			if($self.attr('not_move')=='true'){//不移动
				
				if($self.index()!=0&&$self.attr('exec_method')&&$self.attr('exec_method')!=''){
					$user[($self.attr('exec_method'))]($self);
				}
				return;
			}
		}
		if($self.index()==0){
			$('.b-r-loading img').hide();
			$('.move_right .alert').remove();
			$('.button-return button').hide();
		}
		
		var direction = 'left',reference=false,upobj=null;
		if($self.index()!=0){
			$('div.search-box,li.search-box-btn').hide();
			direction = 'right';
			
			if($self.attr('exec_method')&&$self.attr('exec_method')!=''){
				$user[$self.attr('exec_method')]($self);
			}
			
			$('.button-return button').each(function(){
				$(this).dequeue();
			}).show();
			
			if($self.attr('reference')&&$self.attr('reference')!=''){
				$self = $self.parent().find('button[ference='+$self.attr('reference')+']');
				if(!$self[0]){
					alert('引用配置错误');
				}else{
					reference = true;
				}
			}
		}else{
			var p = null;
			if((p = $self.parent().find('button.active[reference!=""]'))[0]){
				var m = $self.parent().find('button[ference='+p.attr('reference')+']');
				if(m[0]){
					upobj = $($self);
					$self = m;
				}
			}
			$('li.search-box-btn').show();
		}
		
		move_list_by_direction(direction);
		move_oper_by_direction(direction,$self.index());
			
		$self.parent().find('.active').removeClass('active');
		$self.parent().find('button:gt(0)').attr('disabled',true);
		
		if(reference){
			$self.parent().find('button[reference='+$self.attr('ference')+']').addClass('active').attr('disabled',false);
		}else{
			if(!upobj){
				$self.addClass('active').attr('disabled',false);
			}else if(arguments.length==2){
				$self = $self.parent().find('button:first').addClass('active').attr('disabled',false);
			}else{
				$self.parent().find('button:first').addClass('active');
				return_button_status();
			}
		}
		
		if($self.index()==0){
			$('.b-r-loading img').hide();
			$('.move_right .alert').remove();
			$self.next().attr('disabled',false);//开启添加
			return_button_status();
		}
	}
	
	function return_button_status(){//还原按钮初始化状态
		$user.rowClick();
	}
	
</script>

<style type="text/css">
	.north-menu{margin:10px 10px 0 10px;}
	.north-menu ul{float: left}
	.north-menu span{margin-right: 4px;}
	.move_right{height: 100%;width: 100%;position: absolute;top:0px;left:0px;display: none;overflow:auto;}
	.user-layout-center{position:absolute;left:0;}
	.user-layout-center{top:60px;bottom:10px;_height:100%;overflow:auto;}
	.user-layout-center{_position:relative;background:white;left:10px;right:10px;_top:0;_left:0;_margin-left:10px;}
	.alert{margin:20px 0;}
	.b-r-loading a{cursor:default;}
</style>